<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        table{
            margin: 50px auto;
            border: 2px solid #ddd;
            border-collapse: collapse;
        }
        td,th{
            border: 2px solid #ddd;
            padding: 20px;
            text-align: center;
        }
        th{
            background: #eee;
        }
        .search{
            width: 100%;
            height: 40px;
            text-align: center;
        }
        .search input,button{
            height: 40px;
            line-height: 40px;
            margin-top: 30px;
        }
        .search button{
            height: 43px;
            width: 60px;
        }
    </style>
</head>
<body>
<div id="app">
<div>
    <div class="search">
        <input type="text" placeholder="请输入要查找的姓名" id="key">
        <button @click="searchName">查找</button>
    </div>
    <div class="layui-col-md2" style="margin-left: 30px">
        <div class="layui-panel" id="text">
        </div>
    </div>
    <table id="table">
        <tr><th>员工编号</th>
            <th>员工姓名</th>
            <th>员工工资</th>
            <th>入职时间</th>
            <th>员工性别</th>
            <th>所在部门</th>
        </tr>
    </table>
</div>

<div class="block" id="block">
    <el-pagination
            align="center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="sizes, prev, pager, next"
            :total="total">
    </el-pagination>
</div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                total:0,
                pageSize:5,
                currentPage:1,
                list:[],
                deptmes:[]
            }
        },
        methods: {
            //翻页
            handleSizeChange(val) {
                this.pageSize = val;
                this.infor();
            },
            //分页
            handleCurrentChange(val) {
                this.currentPage = val;
                this.infor();
            },
            inforDeptmes(){
                let self = this;
                $.ajax({
                    type: "POST",
                    url: "/getdeptmes",
                    success:function (res){
                        self.deptmes = res;
                        for (let deptme of self.deptmes) {
                            $("<div></div>")
                                .text(deptme.dname)
                                .css("padding", "15px")
                                .css("text-align", "center")
                                .addClass("dname")
                                .appendTo("#text")
                                .on("click", function() {
                                    self.handleDeptClick(deptme.dname);
                                });
                        }
                    }
                });
            },
            infor(){
                var self = this;
                $.ajax({
                    type: "POST",
                    url: "/getemps",
                    data: {
                        "currentPage": self.currentPage,
                        "pageSize": self.pageSize
                    },
                    success: function (res){
                        self.list = res.list;
                        self.total = res.total;
                        let table = $("#table");
                        $("#table tr:gt(0)").remove();
                        for (let i = 0; i < self.list.length; i++) {
                            let row = $("<tr></tr>");
                            row.append($("<td></td>").text(self.list[i].eid));
                            row.append($("<td></td>").text(self.list[i].ename));
                            row.append($("<td></td>").text(self.list[i].salary));
                            row.append($("<td></td>").text(self.list[i].workDate));
                            row.append($("<td></td>").text(self.list[i].esex));
                            row.append($("<td></td>").text(self.list[i].deptme.dname));
                            table.append(row);
                        }
                    }
                });
            },
            handleDeptClick(dname) {
                let table = $("#table");
                $("#table tr:gt(0)").remove();
                console.log(dname)
                for (let i = 0; i < this.list.length; i++) {
                    if(this.list[i].deptme.dname==dname){
                        console.log(this.list)
                        let row = $("<tr></tr>");
                        row.append($("<td></td>").text(this.list[i].eid));
                        row.append($("<td></td>").text(this.list[i].ename));
                        row.append($("<td></td>").text(this.list[i].salary));
                        row.append($("<td></td>").text(this.list[i].workDate));
                        row.append($("<td></td>").text(this.list[i].esex));
                        row.append($("<td></td>").text(this.list[i].deptme.dname));
                        table.append(row);
                    }
                }
            },
            searchName(){
                let self = this
                $.ajax({
                    type: "post",
                    url: "/searchName",
                    data:{
                        "currentPage": self.currentPage,
                        "pageSize": self.pageSize,
                        "ename": $("#key").val()
                    },
                    success: function (res){
                        self.list = res.list;
                        self.total = res.total;
                        let table = $("#table");
                        $("#table tr:gt(0)").remove();
                        for (let i = 0; i < self.list.length; i++) {
                            let row = $("<tr></tr>");
                            row.append($("<td></td>").text(self.list[i].eid));
                            row.append($("<td></td>").text(self.list[i].ename));
                            row.append($("<td></td>").text(self.list[i].salary));
                            row.append($("<td></td>").text(self.list[i].workDate));
                            row.append($("<td></td>").text(self.list[i].esex));
                            row.append($("<td></td>").text(self.list[i].deptme.dname));
                            table.append(row);
                        }
                    }
                })
            }
        },
        mounted(){
            this.infor();
            this.inforDeptmes();
        }
    });
</script>
</body>
</html>
